<template>
  <div class="popup" :style="{width:width}" @click.stop>
    <div class="header-box">
      <slot name="title"></slot>
      <a-icon type="close" class="close-icon" @click="closeFn" />
    </div>
    <div class="content-box">
      <slot name="content"></slot>
    </div>
    <footer class="footer-box"></footer>
    <slot name="footer"></slot>
  </div>
</template>
<script>
import eventBush from "@/eventBush";
export default {
  name: "popup",
  data() {
    return {
      width: "50%",
    };
  },
  methods: {
    closeFn() {
      eventBush.$emit("onFrom", false);
    },
  },
  mounted() {},
};
</script>

<style scoped lang="scss">
.popup {
  background-color: #37ddc0;
  max-height: 60%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 15;
  margin: auto;
  .header-box {
    font-size: 18px;
    font-weight: 600;
    background: #207064;
    padding: 10px;
    box-sizing: border-box;
    .close-icon {
      position: absolute;
      right: 0;
      font-size: 30px;
      font-weight: 600;
    }
  }
  .content-box {
    min-height: 200px;
  }
}
</style>